import React, { Component } from 'react'
import { Form, Input, Button, Radio, DatePicker, Select, Upload, message } from 'antd';
import moment from 'moment'
import { UploadOutlined } from '@ant-design/icons';
import { RequestUserAdd } from "../../api/UserApi";
import { withRouter } from 'react-router-dom';
import UserCss from "./User.module.css";

const { TextArea } = Input;
const { Option } = Select;

class add extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 1,
            formtdate: '',
            education: '',
            picfile: null,
            imgDom: null
        };
    }
    // 单选框
    onChange = e => {
        console.log('radio checked ', e.target.value);
        this.setState({
            value: e.target.value,
        });
    }

    // 日期时间
    onChangeTime(value, dateString) {
        this.state.formtdate = dateString;
    }

    onOk(value) {
        value = moment(value).format('YYYY-MM-DD HH:mm:ss') //这么解决的
        console.log('onOk: ', value);
        this.state.formtdate = value;
    }

    handleChange(value) {
        console.log(`selected ${value}`);
        this.state.education = value;
    }

    changepic(e) {
        this.state.picfile = e.target.files[0];
        var newsrc = this.getObjectURL(e.target.files[0]);
        // document.getElementById('show').src = newsrc;
       this.state.imgDom.src = newsrc;
    }
    //建立一個可存取到該file的url
    getObjectURL(file) {
        if (!file) return;
        var url = null;
        // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
        if (window.createObjectURL != undefined) { // basic
            url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
            url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
            url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }
    render() {
        return (
            <div>
                <Form name="vistor" onFinish={this.onFinish.bind(this)}>
                    <Form.Item label="用户名" name="username" >
                        <Input />
                    </Form.Item>

                    <Form.Item label="年&nbsp;&nbsp;&nbsp;龄" name="age">
                        <Input />
                    </Form.Item>

                    <Form.Item label="性&nbsp;&nbsp;&nbsp;别" name="sex">
                        <Radio.Group onChange={this.onChange.bind(this)} value={this.state.value}>
                            <Radio value={0}>男</Radio>
                            <Radio value={1}>女</Radio>
                        </Radio.Group>
                    </Form.Item>

                    <Form.Item label="单&nbsp;&nbsp;&nbsp;位" name="company">
                        <Input />
                    </Form.Item>

                    <Form.Item label='学&nbsp;&nbsp;&nbsp;历' name='education'>
                        <Select defaultValue="大专" style={{ width: 120 }} onChange={this.handleChange.bind(this)} value='大专'>
                            <Option value="高中">高中</Option>
                            <Option value="大专">大专</Option>
                            <Option value="本科">本科</Option>
                            <Option value="硕士">硕士</Option>
                        </Select>
                    </Form.Item>

                    <Form.Item label="到访原因" name='visitgoal'>
                        <TextArea rows={4} />
                    </Form.Item>

                    <Form.Item label="到访时间" name='visittime'>
                        < DatePicker showTime onChange={this.onChangeTime.bind(this)} onOk={this.onOk.bind(this)} />
                    </Form.Item>

                    <Form.Item label='图片上传'>
                        <input type='file' id='file' name='headerimg' style={{ opacity: 0 }} onChange={this.changepic.bind(this)}></input>
                        <div className={UserCss.previewWrap}>
                            <img id='show' className={UserCss.previewImg} width='127' height='127' ref={dom => this.state.imgDom = dom} />
                            <label for="file" className={UserCss.previewLable}>+</label>
                        </div>
                    </Form.Item>

                    <Form.Item style={{ marginTop: '140px' }}>
                        <Button type="primary" htmlType="submit">确定</Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }

    // 表单提交
    onFinish(values) {
        console.log(values);
        const { username, age, sex, visitgoal, education, company } = values;
        const visittime = this.state.formtdate;
        const fileHeader = this.state.picfile;
        // console.log(username, age, sex, visitgoal, education, company, visittime)

        let formdate = new FormData();
        formdate.append('username', username);
        formdate.append('age', age);
        formdate.append('sex', sex);
        formdate.append('visitgoal', visitgoal);
        formdate.append('education', education);
        formdate.append('company', company);
        formdate.append('visittime', visittime);
        formdate.append('fileHeader', fileHeader);

        const _this = this;
        RequestUserAdd(formdate).then(data => {
            if (data.resultCode == 1) {
                message.info('上传成功!');
                _this.props.history.push({ pathname: '/user/list' })
            }
        }).catch(err => {
            message.error('上传失败！' + err)
        })
    }
}

export default withRouter(add)